<template>
  <transition name="slide">
    <div class="detailContainer">
      <header class="header">
        <router-link to='/kind' class="iconfont icon-jiantou3"></router-link>
        <p>SALE攻略</p>
        <span class="iconfont icon-fenxiang"></span>
      </header>
      <div class="content">
        <!-- 攻略——文章 开始-->
        <div class="atc">
          <div class="t-title">
            <h1> {{title}} </h1>
            <div class="read">
              <span> {{123}} 阅读</span>
              <div @click="collection">
                <span :class="`iconfont icon-${showIcon ? 'shoucang3' : 'shoucang1'}`">
                  收藏
                </span>
              </div>
            </div>
          </div>
          <img :src="img" />
          <div class="atc-content">
            <p>“陆止于此，海始于斯”，葡萄牙“诗魂”卡蒙斯世代传颂的名句生动描绘出他的祖国所处优越地理位置。20年前，我曾有机会到访葡萄牙，2014年又过境特塞拉岛。应德索萨总统邀请，我将再次踏上这片沃土，对贵国进行国事访问，感到由衷的高兴。 </p><br/>
            <p>近年来，葡萄牙成功应对欧洲主权债务危机挑战，在发展国民经济、弘扬民族文化、促进社会进步等方面取得重要成就，古老大地不断焕发勃勃生机。作为葡萄牙人民的真诚朋友，中国人民对此表示钦佩。 </p><br/>
          </div>
        </div>
        <!-- 攻略——文章 结束-->
        <div class="border-b"></div>
        <!-- 攻略——精选好货 开始-->
        <div class="goods">
          <div class="goods-title">
            <h1>精选好货</h1>
          </div>
          <div class="goods-list">
            <mt-swipe :show-indicators="false">
              <!-- 1 -->
              <mt-swipe-item>
                <!-- 1-1 -->
                <div class="goods-li" @click= "goDetail(tit1)">
                  <img :src="tit1.images.small" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{tit1.rating.average}}
                      </span>
                      <span>
                        ￥{{tit1.year}}
                      </span>
                    </div>
                    <p>
                      {{tit1.title}}
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 1-2 -->
                  <div class="goods-li" @click= "goDetail(tit2)">
                    <img :src="tit2.images.small" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{tit2.rating.average}}
                        </span>
                        <span>
                          ￥{{tit2.year}}
                        </span>
                      </div>
                      <p>
                        {{tit2.title}}
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
              <!-- 2 -->
              <mt-swipe-item>
                <!-- 2-1 -->
                <div class="goods-li"  @click= "goDetail(tit3)">
                  <img :src="tit3.images.small" alt="" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{tit3.rating.average}}
                      </span>
                      <span>
                        ￥{{tit3.year}}
                      </span>
                    </div>
                    <p>
                      {{tit3.title}}
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 2-2 -->
                  <div class="goods-li" @click= "goDetail(tit4)">
                    <img :src="tit4.images.small" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{tit4.rating.average}}
                        </span>
                        <span>
                          ￥{{tit4.year}}
                        </span>
                      </div>
                      <p>
                        {{tit4.title}}
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
            </mt-swipe>
          </div>
        </div>
        <!-- 攻略——精选好货 结束-->
        <div class="border-b"></div>
        <!-- 攻略——评论-->
        <div class="comment-box">
          <!-- 攻略——评论——标题 -->
          <div class="comment-title">
            <p>评论</p>
            <!-- 评论数量 -->
          </div>
          <!-- 评论内容 -->
          <ul class="comment-ul">
            <!-- 第一条评论 -->
              <li class="comment-li">
                  <img :src="ctit1.images.small"/>
                  <div>
                      <h2>{{ ctit1.title }}</h2>
                      <p>{{ ctit1.genres }}</p>
                      <span>{{ ctit1.year }}</span>
                  </div>
              </li>
              <!-- 第二条评论 -->
              <li class="comment-li">
                  <img :src="ctit2.images.small"/>
                  <div>
                      <h2>{{ ctit2.title }}</h2>
                      <p>{{ ctit2.genres }}</p>
                      <span>{{ ctit2.year }}</span>
                  </div>
              </li>
              <!-- 第三条评论 -->
              <li class="comment-li">
                  <img :src="ctit3.images.small"/>
                  <div>
                      <h2>{{ ctit3.title }}</h2>
                      <p>{{ ctit3.genres }}</p>
                      <span>{{ ctit3.year }}</span>
                  </div>
              </li>
              <router-link to="/kindcomment" class="comment-li-more">
                <p>查看全部评论</p>
              </router-link>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
import detail from '@/components/detail/Index'
export default {
  props: ['id'],
  data () {
    return {
      title: '',
      img: '',
      rating: '',
      detail: [],
      showIcon: false,
      tit1: '',
      tit2: '',
      tit3: '',
      tit4: '',
      ctit1: '',
      ctit2: '',
      ctit3: ''
    }
  },
  components: {
    detail
  },
  created () {
    const id = this.$route.params.id// 攻略文章
    axios.get(`/taotao/detail?id=${id}`)
      .then(data => {
        console.log(data)
        const obj = data.data[0]
        this.title = obj.title
        this.img = obj.images.small
        this.rating = obj.rating.average
      })
    fetch('/taotao/douban').then(res => res.json())// 精选好货
      .then(data => {
        console.log(data)
        this.tit1 = data[0]
        this.tit2 = data[1]
        this.tit3 = data[2]
        this.tit4 = data[3]
      })
    fetch('/taotao/douban').then(res => res.json())
      .then(data => {
        console.log(data, '评论')
        this.ctit1 = data[0]
        this.ctit2 = data[1]
        this.ctit3 = data[2]
      })
  },
  methods: {
    goDetail (item) {
      this.$router.push(`/detail/${item.id}`)
    },
    collection () {
      fetch('/taotao/users/register', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      }).then(res => res.json())
        .then(data => {
          console.log(data)
          if (data === 1) {
            this.showIcon = true
            Toast({
              message: '收藏成功',
              position: 'bottom',
              duration: 2000
            })
          } else {
            Toast({
              message: '收藏失败，请先登录',
              position: 'bottom',
              duration: 2000
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  position: relative;
  @include line-height(0.44rem);
  p {
    @include rect(100%, 100%);
    text-align: center;
    @include font-size(0.16rem)
  }
}
.icon-jiantou3 {
  position: absolute;
  left: 0.1rem;
  color: #fff;
}
.icon-fenxiang {
  position: absolute;
  top:0;
  right: 0.15rem;
  font-size: 0.22rem;
  color: #fff;
}

.t-title {
  h1 {
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.20rem
  }
  .read {
    width: 100%;
    @include flexbox();
    @include justify-content(space-between);
    span {
      font-size: 0.16rem;
      @include margin(0 0.3rem);
    }
  }
}
.icon-shoucang3 {
  color: #ea9c9a
}
//攻略--文章
.atc {
  min-height: 2rem;
  width: 100%;
  @include flexbox();
  @include justify-content();
  @include flex-direction(column);
  color: #000;
  img {
    @include rect(3.2rem, 1.51rem);
    @include margin(0.1rem auto);
  }
  .atc-content {
    text-indent: 2em;
    @include margin(0 0.3rem)
  }
}

//border
.border-b {
  @include rect(100%, 0.2rem);
  background: #e5e5e5;
}

//攻略--精选好货
.goods {
  @include rect(100%, 2.6rem);
  color: #000;
  //攻略--精选好货--title
  .goods-title {
    @include border(0 0 0.03rem 0, #e5e5e5, solid);
    h1 {
      @include rect(100%, 0.4rem);
      @include margin(0 0.3rem);
      line-height: 0.4rem;
      font-size: 0.18rem
    }
  }
  //攻略--精选好货--商品列表
  .goods-list {
    @include rect(96%, 2.2rem);
    @include margin(0.08rem 0.08rem 0.08rem 0.08rem);
    .goods-li {
      @include rect(45%, 2.1rem);
      @include margin(0 0.09rem);
      float: left;
      @include flexbox();
      @include justify-content();
      @include flex-direction(column);
      @include align-items();
      img {
        @include rect(1.5rem, 1.5rem);
        background: #e5e5e5;
        display: block
      }
      .goods-li-content {
        @include rect(1.5rem, 0.6rem);
        .price {
          @include rect(100%, 0.24rem);
          color: #ea9c9a;
          span:first-child {
            line-height: 0.24rem;
          }
          span:last-child {
            color: #ccc;
            text-decoration: line-through;
            font-size: 0.1rem
          }
        }
        p {
          @include rect(100%, 0.36rem);
          line-height: 0.18rem;
          font-size: 0.14rem
        }
      }
    }
  }
}
.comment-box {
  min-height: 2rem;
  //攻略--评论--标题
  .comment-title {
    @include rect(100%, 0.3rem);
    color: #ea9c9a;
    font-size: 0.2rem;
    line-height: 0.3rem;
    p {
      float: left;
      @include margin(0 0.1rem 0 0.3rem);
    }
  }
}
//评论--内容
.comment-ul {
    min-height: 0.9rem;
    color: #000;
    .comment-li {
        @include rect(100%, 0.9rem);
        img {
            @include rect(0.6rem, 0.6rem);
            @include margin(0.1rem 0.1rem);
            border-radius: 50%;
            border: 0.01rem solid #ccc;
            float: left;
        }
        div {
            @include rect(78%, 100%);
            padding: 0.1rem 0;
            float: right;
            @include border(0 0 0.01rem 0, #ccc, solid);
            h2 {
                @include rect(100%, 0.28rem);
                line-height: 0.2rem;
                font-size: 0.16rem;
            }
            p {
                @include rect(100%, 0.4rem);
                line-height: 0.2rem;
            }
            span {
              display: block;
              @include rect(95%, 0.1rem);
              line-height: 0.1rem;
              font-size: 0.1rem;
              text-align: right;
              color: #777
            }
        }
    }
}
.comment-li-more {
  @include rect(100%, 0.4rem);
  text-align: center;
  color: #ea9c9a;
  line-height: 0.4rem
}
</style>
